<script setup>
import { ref, onMounted } from "vue"
import { useIndexStore } from "@/store/index"
import { useRoute } from "vue-router"

onMounted(() => {
	indexStore.setIndexState({
		navWidth: "26%",
		navOpacity: 1,
	})
})

const indexStore = useIndexStore()
const route = useRoute()
</script>
<template>
	<div
		class="works"
		:class="route.path == '/works/charging_effect' ? 'black' : ''"
	>
		<RouterView />
	</div>
</template>
<style scoped lang="scss">
.works {
	flex: 1;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.black {
	background-color: black;
	filter: contrast(10) hue-rotate(0);
	animation: huerotate 10s linear infinite;
}
@keyframes huerotate {
	to {
		filter: contrast(10) hue-rotate(360deg);
	}
}
</style>
